<template>
<div class="page">
    <div class="personage clearfix">
        <div class="personage-header clearfix">
            <img :src="info.picture" alt="">
            <div class="personage-header-cont clearfix">
                <h3>{{ info.name }}</h3>
                <p>{{ info.content }}</p>
                <div class="personage-size">
                    <span>单曲<em>{{ total }}</em></span>
                    <span>专辑<em>{{size}}</em></span>
                </div>

                <div class="personage-btn">
                    <a href="javascript:;" style="background-color: #823117;" v-if="list.length>0">
                        <span style="color: #FFF;" @click="routerLink(`/main/playList?tsid=${tsid}`)" >
                            <i class="iconfont icon-bofanganjian" style="font-size:12px; margin-right:10px"></i>播放全部歌曲
                        </span>
                    </a>
                    <!-- <a href="javascript:;" style="background-color: #fff;">
                        <span style="color: #823117;">
                            <i class="iconfont icon-fenxiang" style="font-size:14px; margin-right:8px"></i>分享  280.4万
                        </span>
                    </a> -->
                </div>
            </div>
        </div>

        <div class="personage-content clearfix">
            <div class="personage-song-list fl clearfix">
                <div class="personage-song-header">
                    
                    <span :class="{'active' : cur === 'single'}" @click="switchFn('single')"><i class="arrow"></i>单曲 ({{ total }})</span>
                    <span :class="{'active' : cur === 'special'}" @click="switchFn('special')">专辑 ({{size}})</span>
                </div>

                <div class="personage-song-list-title clearfix" v-show="cur === 'single'">
                    <div class="personage-song-list-one" style="padding-left:36px">
                        歌曲
                    </div>
                    <div class="personage-song-list-two">
                        专辑
                    </div>
                    <div class="personage-song-list-three">
                        时长
                    </div>
                </div>

                <div class="personage-song-list-cont clearfix" >
                    <div class="personage-song-list-l" v-for="(item, index) of list" :key="index"  @click="routerLink(`/main/play?musicid=${item.musicid}`)" v-show="cur === 'single'">
                        <div class="personage-song-list-one">
                            <span class="mr16">{{index + 1}}</span>{{ item.name}}
                            <i class="iconfont icon-bofang"></i>
                            <!-- <i class="iconfont icon-fenxiang"></i> -->
                        </div>
                        <div class="personage-song-list-two">
                            {{ item.albumname }}
                        </div>
                        <div class="personage-song-list-three">
                            {{ item.playtime }}
                        </div>
                    </div>
                    
                    <div class="personage-cd-list clearfix" v-show="cur === 'special'">
                        <div class="personage-cd-list-cont" style="margin-right:34px;" v-for="(item, index) of albumList" :key="index" @click="routerLink(`/main/playList?albumid=${item.albumid}`)">
                            <div class="personage-cd-img">
                                <img src="../images/r.png" alt="" class="right">
                                <img :src="item.picture" alt="" class="cd">
                            </div>

                            <p>{{item.name}}</p>
                            <!-- <span>2015-03-27</span> -->
                        </div>
                        
                        
                    </div>
                    
                </div>

                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" style="margin:20px auto 0;" :page-size="pagesize" v-if="total > 10 && cur === 'single'"></el-pagination>
            </div>

            <div class="you-like clearfix">
                <div class="you-like-title"><span></span>猜你喜欢</div>

                <div class="you-like-list">
                    <div class="you-like-list-cont" v-for="(item, index) of recommendList" :key="index" @click="linkId(item.tsid)">
                        <img :src="item.picture" alt="">
                        <p>{{ item.name }}</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    
</div>
</template>
<script>
import {getResponse, getResponses} from "../api"
import {serialize, lazy, timeFormat} from "../utils"
    
export default {
    data(){
        return {
            pagenum:1,
            pagesize:10,
            tsid:'',
            total:0,
            recommendList:[],
            info:{
                picture:'',
                name:'',
                content:''
            },
            list:[],
            albumList:[],
            cur:'single',
            size:0
        }
    },
    methods:{
        routerLink(url){
            this.$router.push(url)
        },

        linkId(id) {
            this.tsid = id
            this.getWorkList()

            this.getRecommend()

            this.getAlbum()
        },

        handleCurrentChange(val) {
            this.pagenum = val

            this.cur === 'single' ? this.getMusic() : this.getAlbum()
        },

        switchFn(name) {
            this.pagenum = 1
            this.cur = name
        },

        // 获取法师详情和列表
        async getWorkList() {
            const data = await getResponses(`/fochina/query/topicsubjectmusic/json`,`tsid=${this.tsid}&tstype=1`)

            if(data.code === '0000') {
                this.info = data.data[0]
                this.getMusic()
                // this.total	= +data.total
                
            } else {
                console.log(data.error)
            }
        },

        // 推荐法师
        async getRecommend() {
            const data = await getResponses(`/fochina/query/topicsubjectrecommend/json`,`tsid=${this.tsid}`)

            if(data.code === '0000') {
                this.recommendList	= data.data
            } else {
                console.log(data.error)
            }
        },

        // 法师音乐列表
        async getMusic() {	
            const data = await getResponses(`/fochina/query/music/json`,`tsid=${this.tsid}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`)
            if(data.code === '0000') {
                this.list = data.data
                this.total = +data.total
            } else {
                console.log(data.error)
            }
        },

        // 法师专辑				
        async getAlbum() {
            const data = await getResponses(`/fochina/query/musicalbum/json`,`tsid=${this.tsid}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`)
            if(data.code === '0000') {
                this.albumList = data.data
                this.size = +data.total
            //    albumList
            } else {
                console.log(data.error)
            }
        }
    },

    mounted(){
        !!this.$route.query.tsid && (this.tsid = this.$route.query.tsid)

        this.getWorkList()

        this.getRecommend()

        this.getAlbum()

    }
}
</script>

<style>
.you-like-title span, .personage-song-header span i.arrow{
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-left: 6px solid #823117;
    border-bottom: 3px solid transparent;
    float:left;
    position: relative;
    top:50%;
    transform:translateY(-50%);
    margin-right:8px
}

.personage-song-list-title{
    background-color: #F6F6F6;
    text-align: left;
    font-size: 12px;
    color: #999;
    line-height: 40px;
}

.personage-song-list-one {
    width:338px;
    padding-left:36px;
    height: 40px;
    float: left;
}

.personage-song-list-two {
    width:239px;
    height: 40px;
    float: left;
}

.personage-song-list-three {
    width:67px;
    height: 40px;
    float: left;
}

.personage-song-list-l {
    width:680px;
    height: 58px;
    line-height: 58px;
    border-bottom: 1px solid #E9EAEC;
    font-size: 14px;
    color: #333333;
}


.personage-song-list-l .personage-song-list-one span {
    color:#999;
    font-size: 14px;
}

.personage-song-list-l .personage-song-list-three {
    font-size: 12px;
    color: #999;
}

.you-like {
    width:300px;
    float:right;
    /* padding-left:10px; */
}

.you-like-title{
    height: 32px;
    line-height: 32px;
    padding-top:18px;
    border-bottom: 4px solid #fff;
    margin-bottom:20px;
    font-size: 16px;
    color: #000000;
}

.you-like-list-cont {
    width:120px;
    margin:0 0 30px 30px;
    float: left;
    cursor: pointer;
}

.you-like-list-cont img {
    width:120px;
    height: 120px;
    border-radius: 100%;
}

.you-like-list-cont p {
    font-size: 14px;
    color: #333333;
    text-align: center;
    height: 20px;
    width:100%;
    margin-top:9px;
}

.personage-cd-list {
    width:100%;
    padding-top:13px;
}

.personage-cd-img {
    width:100%;
    position: relative;
    cursor: pointer;
}

.personage-cd-img img.cd{
    width:129px;
    height: 129px;
}

.personage-cd-img img.right {
    width:15px;
    height: 120px;
    position: absolute;
    top:4px;
    right: 0;
}

.personage-cd-list p {
    font-size: 14px;
    color: #333;
    text-align: center;
    margin-top:12px;
    line-height: 22px;
}

.personage-cd-list span {
    font-size: 12px;
    color: #999;
    text-align: center;
    display:block;
    line-height: 22px;
}

.personage-cd-list-cont {
    width:143px;
    float: left;
    margin-bottom: 40px;
    
}

.personage,.personage-content{
    width:100%;
}

.personage-header {
    width: 100%;
    min-height: 200px;
    padding: 20px 0;
    background-color: #F7F7F7;
}

.personage-header img {
    width:200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    margin-left:53px;
    margin-right:38px;
}

.personage-header .personage-header-cont {
    width: 620px;
    float: left;
}

.personage-header-cont h3 {
    font-size: 28px;
    color: #333333;
    height: 40px;
    margin-bottom: 14px;
}

.personage-header-cont p {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
    line-height: 18px;
}

.personage-size {
    margin-top:16px;
}

.personage-size span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    min-width: 116px;
}

.personage-size span em {
    font-style: normal;
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #333333;
    margin-left:14px;
    margin-top:-2px;
}

.personage-btn a {
    display: inline-block;
    width:156px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100px;
    margin-right:16px;
    border: 1px solid #823117;
    margin-top:18px;
}

.personage-btn span {
    font-size: 14px;
}

.personage-song-list,.personage-song-list-cont {
    width:680px;
}

.personage-song-header{
    height: 32px;
    line-height: 32px;
    padding-top:18px;
    border-bottom: 4px solid #C6A4A4;
    margin-bottom:20px;
}

.personage-song-header span{
    display: inline-block;
    font-size: 16px;
    color: #333;
    min-width: 90px;
    height: 32px;
    line-height: 32px;
    margin-bottom: -4px;
    margin-right:24px;
    padding-left:0;
    border-bottom: 4px solid #C6A4A4;
    cursor: pointer;
}

.personage-song-header span.active {
    border-bottom: 4px solid #823117;
    color: #823117;
}

.personage-song-list-title{
    background-color: #F6F6F6;
    text-align: left;
    font-size: 12px;
    color: #999;
    line-height: 40px;
}

.personage-song-list-one {
    width:338px;
    padding-left:6px;
    height: 59px;
    float: left;
    position: relative;
    
}

.personage-song-list-one:hover i {
    display: block;
}

.personage-song-list-one .icon-fenxiang {
    font-size:16px;
    color:#999;
    position:absolute;
    right:18px;
    top:50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none;
}

.personage-song-list-one .icon-bofang {
    display: none;
    font-size:20px;
    color:#823117;
    position:absolute;
    right:18px;
    /* right:56px; */
    top:50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.personage-song-list-two {
    width:239px;
    height: 40px;
    float: left;
}

.personage-song-list-three {
    width:67px;
    height: 40px;
    float: left;
}

.personage-song-list-l {
    width:680px;
    height: 58px;
    line-height: 58px;
    border-bottom: 1px solid #E9EAEC;
    font-size: 14px;
    color: #333333;
}


.personage-song-list-l .personage-song-list-one span {
    color:#999;
    font-size: 14px;
}

.personage-song-list-l .personage-song-list-three {
    font-size: 12px;
    color: #999;
}

/* .you-like {
    width:300px;
    float:right;
    padding-left:20px;
} */

.you-like-title{
    height: 32px;
    line-height: 32px;
    padding-top:18px;
    border-bottom: 4px solid #fff;
    margin-bottom:20px;
    font-size: 16px;
    color: #000000;
}

.you-like-list-cont {
    width:120px;
    margin:0 0 30px 30px;
    float: left;
}

.you-like-list-cont img {
    width:120px;
    height: 120px;
    border-radius: 100%;
}

.you-like-list-cont p {
    font-size: 14px;
    color: #333333;
    text-align: center;
    height: 20px;
    width:100%;
    margin-top:9px;
}

.el-pagination {
    text-align: center
}
</style>